<template>
<div>
    <div class="nav-bar">
        <div class="bottom">
            <span>
                <van-icon @click="$router.back()" class="go-back" name="arrow-left" />
            </span>
            <span>添加账户</span>
        </div>
    </div>
    <div class="zfbnum" @click="showPopup">
        <span @click="showPopup">{{payType==1?'支付宝':'银行卡'}}</span>
        <van-icon name="arrow" class="rightjiantou" />
    </div>
    <van-popup v-model="show" position="bottom">
        <van-picker v-model="show" title="选择账户" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
    <div class="subzfb" v-if="payType == '1'">
        <van-field :value="yhkName" readonly label="用户名" />
        <van-field class="van-field-isRequired" v-model="zfbNum" type="digit" placeholder="请输入支付宝账号" label="账号" />
    </div>
    <div class="subzfb" v-if="payType == '2'">
        <van-field :value="yhkName" readonly label="开户人姓名" />
        <van-field class="van-field-isRequired" v-model="yhkNum" type="digit" placeholder="请输入银行卡号" label="卡号"/>
        <van-field class="van-field-isRequired" v-model="yhkKhh" placeholder="请输入开户行" label="开户行" />
    </div>
    <div class="is_default">
        设置为默认账户:
        <van-switch class="check_def" v-model="isDefault" active-color="#07c160" inactive-color="#ccc" size="16px" />
    </div>

    <!-- <div class="isread">
        <input type="checkbox" v-model="ischecked">
        <span>
            我已阅读且同意相关
            <a>《服务条款》</a>
            和
            <a>《隐私政策》</a>
        </span>
    </div> -->
    <div class="trueadd_btn" @click="trueAdd">
        确定
    </div>
</div>
</template>

<script>
import {
    Toast
} from 'vant';
import {
    bankCard,
    aliAccout
} from "@/utils/validate.js";
import {
    addWithdrawal
} from "@/api/withdrawal";
export default {
    components: {},
    data() {
        return {
            payType: '1',
            ischecked: false,
            show: false,
            columns: ['支付宝', '银行卡'],
            //支付宝账号
            zfbNum: '',
            //银行卡号
            yhkNum: '',
            //开户行
            yhkKhh: '',
            isDefault: false
        }
    },
    computed:{
        yhkName(){
            console.log(this.$store.state.user)
            return this.$store.state.user.name
        }
    },
    deactivated() {
        this.$destroy(true); //销毁组件
    },
    methods: {
        onConfirm(value) {
            value == '支付宝' ? this.payType = 1 : this.payType = 2
            this.show = false
        },
        onCancel() {
            this.show = false
        },
        showPopup() {
            this.show = true
        },
        addpay(params) {
            console.log(params)
            addWithdrawal(params).then(res => {
                if (res.code === 200) {
                    Toast.success('添加成功');
                    this.$router.push('/replace/balance')
                } else {
                    Toast.fail('添加失败');
                }
            })
        },
        trueAdd() {
            
            // if (this.ischecked) {
                if (this.payType == '1') {
                    if (this.zfbNum != '' && this.zfbName != '' && aliAccout(this.zfbNum)) {
                        let params = {
                            account: this.zfbNum,
                            account_name: this.yhkName,
                            account_type: this.payType,
                            is_default: this.isDefault ? 1 : 2
                        }
                        this.addpay(params)
                    } else {
                        switch ('') {
                            case this.zfbNum:
                                Toast('请输入支付宝账号')
                                break;
                            case this.zfbName:
                                Toast('请输入姓名')
                                break;
                            default:
                                Toast('请输入正确的支付宝账号')
                                break;
                        }
                    }
                }
                if (this.payType == '2') {
                    if (this.yhkNum != '' && this.yhkKhh != '' && bankCard(this.yhkNum)) {
                        let params = {
                            account: this.yhkNum,
                            account_name:this.yhkName,
                            sub_branch:this.yhkKhh,
                            account_type: this.payType,
                            is_default: this.isDefault ? 1 : 2
                        }
                        console.log(params)
                        this.addpay(params)
                    } else {
                        switch ('') {
                            case this.yhkNum:
                                Toast('请输入银行卡号');
                                break;
                            case this.yhkKhh:
                                Toast('请输入开户行');
                                break;
                            default:
                                Toast('请输入正确的银行卡号')
                                break;
                        }
                    }
                }
            // } else {
            //     Toast('请先勾选我已阅读且同意相关《服务条款》和《隐私政策》')
            // }
        }
    }
}
</script>

<style lang="less" scoped>
.van-cell.van-field {
    padding-left: 0;
    margin-top: 12px;
}
.van-picker-column{
    height: 300px !important;
}
.van-picker{
    height: 100%;
}
.nav-bar {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 3000;
    margin-bottom: 10px;
    .bottom {
        padding: 0 .4rem;
        box-sizing: border-box;
        line-height: 1.333333rem;
        font-size: 20px;
        z-index: 1;
        text-align: center;
        >span {
            &:nth-child(1) {
                height: 1.333333rem;
                float: left;
                text-align: center;
                font-weight: 700;

                i {
                    line-height: 1.333333rem;
                }
            }

            &:nth-child(2) {
                text-align: center;
                font-weight: 700;
            }
        }
    }
}

.zfbnum {
    margin-top: 15px;
    padding: 0 12px;

    .rightjiantou {
        float: right;
    }
}

.subzfb {
    padding-left: 12px;

    input {
        display: block;
        margin-top: 30px;
        border: none;
    }
}

.isread {
    margin-top: 17px;
    font-size: 12.5px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #353535;
    padding-left: 12px;

    input {
        width: 11px;
        height: 11px;
        margin-right: 4.5px;
    }

    a {
        font-weight: 600;
    }
}

.is_default {
    padding-left: 12px;
    margin-top: 15px;

    .check_def {
        vertical-align: middle;
    }
}

.trueadd_btn {
    width: 325px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #0016FF;
    border-radius: 22.5px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: calc(~'50% - 162.5px')
}
</style>
